@import "icon.scss";

/* 初始化样式
------------------------------- */
* {
    margin       : 0;
    padding      : 0;
    // box-sizing: border-box;
    outline      : none !important;
}

html,
body,
#app {
    margin                     : 0;
    padding                    : 0;
    width                      : 100%;
    height                     : 100%;
    font-family                : Microsoft YaHei;
    font-weight                : 400;
    -webkit-font-smoothing     : antialiased;
    -webkit-tap-highlight-color: transparent;
    background-color           : #f8f8f8;
    font-size                  : 14px;
    overflow                   : hidden;
    position                   : relative;
}


/* 主布局样式
------------------------------- */
.layout-container {
    width : 100%;
    height: 100%;

    .layout-header {
        padding         : 0 !important;
        background-color: #35353E;
        height          : 60px;
        line-height     : 60px;
    }

    .layout-main {
        width           : 100%;
        height          : 100vh;
        min-height      : calc(100vh - 55px);
        max-height      : calc(100vh - 55px);
        background-color: #ececec;
    }

    .layout-aside {
        width           : 200px;
        background-color: #35353E;
    }

    .el-sub-menu__title {
        background-color: #3E3E45 !important;
    }

    /*滚动条样式*/
    .layout-main::-webkit-scrollbar {
        width: 5px;
    }

    .layout-main::-webkit-scrollbar-thumb {
        border-radius     : 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background        : rgba(0, 0, 0, 0.2);
    }

    .layout-main::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius     : 0;
        background        : rgba(0, 0, 0, 0.1);

    }
}

/* flex布局 样式水平 或 垂直 或者在左右两边
------------------------------- */
.flex {
    display: flex;
}

.flex-space-between {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.flex-center {
    display    : flex;
    align-items: center;
}

/* 浮动布局
------------------------------- */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

/* 卡片样式
-------------------------*/
.box-card {
    border-radius: 2px !important;

    .el-card__header {
        border-bottom: 1px #ebeef5 solid;
    }

    .card-header {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        height         : 16px;
    }

    span {
        font-weight: bold;
    }
}

/** 卡片下边距
------------------------- */

.bottom10 {
    margin-bottom: 10px;
}

/** 左右偏移
-------------------*/
.rigth14 {
    margin-right: 14px;
}

.left20 {
    margin-left: 20px
}

/** 边框长度
------------------------*/

.width200 {
    width: 200px !important;
}

.width120 {
    width: 120px;
}

.width80 {
    width: 80px;
}

/** 弹出框头部样式覆盖
-----------------------*/

.dialog-header {
    .color303133 {
        color: #303133;
    }

    .el-dialog__header {
        background-color: #f5f7fa !important;
        padding         : 16px 20px !important;
    }

    .el-dialog__title {
        font-size: 16px !important;
        @extend .color303133;
    }

    .el-icon {
        font-size: 21px;
    }

    .el-dialog__body {
        padding: 20px;
    }
}

/** 卡片只有表格上间距取消
---------------*/
.table-card {
    .el-table {
        margin-top: 0px !important;
    }
}

/** 字体大小
---------------------- */

.font12 {
    font-size: 12px;
}